import React, { useEffect, useState } from 'react';
import { Box, IconType, SimpleAccordion } from '@nova-hf/ui';
import ContractWrapper from 'beta/containers/layout/ContractWrapper';
import CancelASContainer from 'beta/pages/askriftir/[contractId]/containers/CancelASContainer';
import ChangeContractContainer from 'beta/pages/askriftir/[contractId]/containers/ChangeContractContainer';
import ChangePayDateContainer from 'beta/pages/askriftir/[contractId]/containers/ChangePayDateContainer';
import PayersettingsContainer from 'beta/pages/thjonustur/[serviceId]/stillingar/containers/PayerSettingsContainer';
import PaymentMethod from 'beta/pages/thjonustur/[serviceId]/stillingar/containers/PaymentMethod';
import Authentication from 'beta/store/authentication';
import { IContext } from 'beta/typings/context';
import { inject } from 'mobx-react';
import { useRouter } from 'next/router';
import { useTranslation } from 'utils/i18n';

type StillingarProps = {
  authentication?: Authentication;
};

type SettingsCategoriesType = {
  id: string;
  name: string;
  icon: IconType;
  content: JSX.Element;
  active: boolean;
};

const COLOR = 'orange';

const Stillingar = ({ authentication }: StillingarProps) => {
  const { t } = useTranslation('stillingar');
  const router = useRouter();
  const [selectedAccordionIds, setSelectedAccordionIds] = useState<string[]>();
  const contractId = router.query.contractId ?? '';

  useEffect(() => {
    if (router.query.stilling && typeof router.query.stilling === 'string') {
      const queryStillingString = router.query.stilling;
      const queryStillingToArr: string[] = queryStillingString.split('-');
      setSelectedAccordionIds(queryStillingToArr);
    }
  }, []);

  useEffect(() => {
    if (selectedAccordionIds?.length) {
      const accordionQueryIds = selectedAccordionIds.join('-');
      router.replace(
        {
          query: { ...router.query, stilling: accordionQueryIds },
        },
        undefined,
        { shallow: true, scroll: false },
      );
    } else {
      delete router.query.stilling;
      router.replace(
        {
          query: { ...router.query },
        },
        undefined,
        { shallow: true, scroll: false },
      );
    }
  }, [selectedAccordionIds]);

  const settingsCategories: SettingsCategoriesType[] = [
    {
      id: 'contract',
      name: t('yourContract.title'),
      icon: 'globe',
      content: (
        <ChangeContractContainer
          contractId={router.query.contractId?.toString() ?? ''}
          color={COLOR}
        />
      ),
      active: true,
    },
    {
      id: 'payer',
      name: t('payerSettings.title'),
      icon: 'wallet',
      content: <PayersettingsContainer color={COLOR} />,
      active: authentication?.isStaff || false,
    },
    {
      id: 'paymentMethod',
      name: t('paymentSettings.title'),
      icon: 'globe',
      content: <PaymentMethod contractId={contractId.toString()} color={COLOR} />,
      active: authentication?.isTokenValid || false,
    },
    {
      id: 'paymentDate',
      name: t('payDateSettings.title'),
      icon: 'calendar',
      content: <ChangePayDateContainer color={COLOR} />,
      active: authentication?.isTokenValid || false,
    },
    {
      id: 'cancel',
      name: t('cancelContract.title'),
      icon: 'close',
      content: <CancelASContainer contractId={router.query.contractId?.toString() ?? ''} />,
      active: true,
    },
  ];
  const handleAddId = (id: string) => {
    if (!selectedAccordionIds?.includes(id)) {
      setSelectedAccordionIds((ids) => (ids?.length ? [...ids, id] : [id]));
    }
  };

  const handleRemoveId = (id: string) => {
    if (selectedAccordionIds?.includes(id)) {
      setSelectedAccordionIds((ids) => ids?.filter((accordionId) => accordionId !== id));
    }
  };
  return (
    <ContractWrapper>
      {settingsCategories.map(({ id, name, icon, content, active }) => {
        if (active) {
          return (
            <Box key={id} id={id} paddingBottom={4}>
              <SimpleAccordion
                onExpand={() => handleAddId(id)}
                onCollapse={() => handleRemoveId(id)}
                title={name}
                color={COLOR}
                icon={icon}
                isExpanded={selectedAccordionIds?.includes(id)}
              >
                <Box paddingY={[3, 5]} paddingLeft={[3, 9]} paddingRight={[3, 5]}>
                  {content}
                </Box>
              </SimpleAccordion>
            </Box>
          );
        }
      })}
    </ContractWrapper>
  );
};

Stillingar.getInitialProps = ({ pathname }: IContext) => {
  return {
    pathname,
    namespacesRequired: ['stillingar'],
  };
};

export default inject('authentication')(Stillingar);